uniapp获取document(使用renderjs)

您所在的位置:网站首页 vue documentgetelementbyid为空 uniapp获取document(使用renderjs)

uniapp获取document(使用renderjs)

2023-08-28 09:13| 来源: 网络整理| 查看: 265

什么是render.js

官网介绍:

image.png 官网链接:uniapp.dcloud.io/tutorial/re…

简单理解就是可以用来操作dom,重点是可以在app端操作dom,正常情况下app中是获取不到document的,使用了renderjs就可以在app中操作了。 举个例子:我在开发项目中使用了一个树形表格组件,但是这个组件不支持插槽,所有列表只能通过配置数据 代码如下:

image.png 我在请求到数据后直接遍历数组将操作的按钮拼成了一段html字符串

image.png 页面效果:

image.png

此时操作列的红色文字就是上面的span标签 由于组件只提供了行点击事件所以得自己给标签绑定事件,这时候就用到了document,但是绑定了事件只在h5中生效,app端就没反应,因为app没有document,如果想要使用document就需要renderjs 写法如下:

image.png 在script标签同级再写一个script标签并指定lang属性为renderjs,在renderjs的script中的写法和vue的script的写法一样,可以使用 vue 组件的生命周期,但是不可以使用 App、Page 的生命周期。

在原来的script标签中定义一个方法用来处理点击事件: image.png 我这里是拿到点击的那一行的数据然后跳转到新增页面,具体操作按自己的实际业务来。 贴上renderjs的完整代码:

image.png 我这里引入了Jquery,引入方式参考了官方的echarts demo image.png 注意红框里的内容,一定要把this.$ownerInstance通过参数传进去 方法中接收 image.png 触发script中的方法:

image.png

第一个参数是方法名,第二个是需要传递的参数。 贴上部分script代码:



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3